window.onload = function () {
 
  
  //放大镜
  //获取元素
  var box = document.querySelector(".preview_img");
  var bigBox = document.querySelector(".big");
  var mask = document.querySelector(".mask");
  var big = document.querySelector(".big img");
  var small = document.querySelector('.preview_img>img');
  //鼠标滑过放大镜下方缩略图，切换图片
  var previews = document.querySelectorAll('.preview_list li');
  for(var i=0;i<previews.length;i++){
    previews[i].index = i+1;
    previews[i].onmouseenter = function(){
      this.parentNode.querySelector('.current').classList.remove('current');
      this.classList.add('current');
      small.src = 'upload/s'+this.index+'.jpg';
      big.src = 'upload/b'+this.index+'.jpg';
    }
  }

  //关键参数:滑块宽高、滑块能移动的最大距离、大图能移动的最大距离
  var maskW, maskH, maxX, maxY, bigMaxX, bigMaxY;
  //鼠标移入box时显示 mask及bigbox,移出时隐藏
  box.onmouseover = function () {
    mask.style.display = "block";
    bigBox.style.display = "block";
    maskW = mask.offsetWidth;
    maskH = mask.offsetHeight;
    maxX = box.clientWidth - maskW;
    maxY = box.clientHeight - maskH;
    bigMaxX = big.offsetWidth - bigBox.offsetWidth;
    bigMaxY = big.offsetHeight - bigBox.offsetHeight;
  };
  box.onmouseout = function () {
    mask.style.display = "none";
    bigBox.style.display = "none";
  };
  //移动光标,相应移动mask
  box.onmousemove = function (e) {
    //限制mask只能在box中移动，不能越过边界
    var maskX = e.pageX - box.offsetLeft - maskW / 2;
    var maskY = e.pageY - box.offsetTop - maskH / 2;
    if (maskX < 0) {
      maskX = 0;
    } else if (maskX > maxX) {
      maskX = maxX;
    }
    if (maskY < 0) {
      maskY = 0;
    } else if (maskY > maxY) {
      maskY = maxY;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    //控制大图移动
    var bigX = (maskX / maxX) * bigMaxX;
    var bigY = (maskY / maxY) * bigMaxY;
    // 方法1:
    // big.style.left = -bigX + "px";
    // big.style.top = -bigY + "px";
    // 方法2:利用scrollLeft和scrollTop
    bigBox.scrollLeft = bigX;
    bigBox.scrollTop = bigY;
  };


  //选项卡
  tabs('.detail_tab_list li','.detail_tab_con .item');
  tabs('.fl .tab_list li','.fl .tab_con .item');
  function tabs(hdSelector,conSelector){
    var navs = document.querySelectorAll(hdSelector);
    var items = document.querySelectorAll(conSelector);
    for(var i=0;i<navs.length;i++){
      navs[i].index = i;
      navs[i].onclick = function(){
        document.querySelector(hdSelector+'.current').classList.remove('current');
        this.classList.add('current');
        document.querySelector(conSelector+'.current').classList.remove('current');
        items[this.index].classList.add('current');
      }
    }
  }

  //选择 商品参数
  choose('dl[class^="choose"]');
  function choose(selector){
    var boxes = document.querySelectorAll(selector);
    console.log(boxes);
    for(var i=0;i<boxes.length;i++){
      var options = boxes[i].querySelectorAll('a')
      for(var j=0;j<options.length;j++){
        options[j].onclick = function(){
          this.parentNode.querySelector('.current').classList.remove('current');
          this.classList.add('current');
        }
      }
    }
  }

  //加减数量
  var increment = document.querySelector('.add');
  var decrement = document.querySelector('.reduce');

  increment.onclick = function(){
      var n = this.parentNode.querySelector("input").value;
      //n++时 会自动将n当成number不会有字符串拼接
      n++;
      this.parentNode.querySelector("input").value = n;
      decrement.style.cursor = 'pointer';
    }
  decrement.onclick = function(){
       var n = this.parentNode.querySelector("input").value;
      //n++时 会自动将n当成number不会有字符串拼接
      n--;
      if(n<1){
        this.style.cursor = 'not-allowed';
        return;
      }
      this.parentNode.querySelector("input").value = n;
    }
  
  // 加入购物车
  document.querySelector('.addcar').onclick = function(){
    var img = document.querySelector('.preview_img>img').src;
    var name = document.querySelector('.sku_name').innerHTML;
    var price = document.querySelector('.summary_price .price').innerHTML;
    var num = document.querySelector('.choose_amount input').value;
    var item = {img:img,name:name,price:price,num:num};
    localStorage.setItem('shopcar',JSON.stringify(item));
  }
  
};
